<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>修改简历</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
	<link rel="stylesheet" href="css/mui.min.css" />
	<!-- build:css css/app.css -->
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/common.css" />
	<!-- endbuild -->
	<style>
		.reset::after,
		.reset::before {
			content: none;
		}

		.add {
			display: block;
			height: 44px;
			line-height: 44px;
			text-align: center;
			font-family: PingFang-SC-Medium;
			color: #0184E9;
			font-size: 14px;
			font-weight: 500;
			background: #FFFFFF;
		}

		.add .mui-icon {
			vertical-align: middle;
		}

		.icon-compose {
			display: inline-block;
			width: 11.5px;
			height: 12.5px;
			vertical-align: -1px;
			background: url('img/icon_xiugai.png') no-repeat;
			background-size: 100% 100%;
		}

		.experience {
			display: flex;
			height: 65px;
			flex-flow: column;
			justify-content: center;
			background: #FFFFFF;
			border-bottom: 1px solid #DDDDDD;
		}

		.experience.experience-only {
			height: 44px;
		}

		.experience .title {
			margin-left: 10px;
		}

		.experience .edit {
			color: #0184E9;
			margin-right: 10px;
		}

		.experience .title,
		.experience .edit {
			font-size: 14px;
		}

		.desc {
			font-size: 13px;
			color: #999999;
			background: #FFFFFF;
		}

		.desc p {
			margin-bottom: 0;
			margin-left: 10px;
		}

		.desc span {
			margin-right: 10px;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">修改简历</h1>
	</header>
	<div class="mui-content">
		<div class="resume">
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<span>照片</span>
					<div class="weui-uploader__input-box">
						<img src="" alt="" class="logo">
						<input id="uploaderInput" class="weui-uploader__input" type="file" name="file"
							accept="image/jpg,image/jpeg,image/png" multiple="">
					</div>
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>
						<span class="red">*</span>姓名
					</label>
					<input type="text" id="name" placeholder="请输入" autocomplete="off" />
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>
						<span class="red">*</span>手机号
					</label>
					<input type="number" id="phone" placeholder="请输入" autocomplete="off" />
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>
						<span class="red">*</span>性别
					</label>
					<input type="text" id="sex" placeholder="请选择" autocomplete="off" />
					<i class="mui-icon mui-icon-arrowright"></i>
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>
						<span class="red">*</span>出生日期
					</label>
					<input id="date" type="text" placeholder="请选择" data-toggle='date' autocomplete="off" />
					<i class="mui-icon mui-icon-arrowright"></i>
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>工作经验</label>
					<input id="word" type="text" placeholder="请选择" autocomplete="off" />
					<i class="mui-icon mui-icon-arrowright"></i>
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>求职状态</label>
					<input id="status" type="text" placeholder="请选择" autocomplete="off" />
					<i class="mui-icon mui-icon-arrowright"></i>
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>最高学历</label>
					<input id="edu" type="text" placeholder="请选择" autocomplete="off" />
					<i class="mui-icon mui-icon-arrowright"></i>
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>专业</label>
					<input type="text" id="major" placeholder="请输入" autocomplete="off" />
				</div>
			</div>
			<div class="margin-top-default resume-list">
				<div class="wrapper flex-row-center">
					<label>籍贯</label>
					<input type="text" id="native-place" placeholder="请输入" autocomplete="off" />
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>现住地址</label>
					<input type="text" id="address" placeholder="请输入" autocomplete="off" />
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>政治面貌</label>
					<input id="outlook" type="text" placeholder="请选择" autocomplete="off" />
					<i class="mui-icon mui-icon-arrowright"></i>
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper flex-row-center">
					<label>个人邮箱</label>
					<input type="text" id="email" placeholder="请输入" autocomplete="off" />
				</div>
			</div>
			<div class="resume-list">
				<div class="wrapper">
					<label>自我评价</label>
				</div>
				<textarea id="self-evaluation" placeholder="请输入"></textarea>
			</div>
		</div>
		<div id="history" class="margin-top-default">
			<a href="./my-add-work.html" class="add">
				<i class="mui-icon mui-icon-plusempty"></i>工作经验
			</a>
		</div>
		<div id="experiences" class="margin-top-default">
			<a href="./my-add-project.html" class="add">
				<i class="mui-icon mui-icon-plusempty"></i>项目经验
			</a>
		</div>
		<div id="educations" class="margin-top-default">
			<a href="./my-add-edu.html" class="add">
				<i class="mui-icon mui-icon-plusempty"></i>教育经历
			</a>
		</div>
		<button id="save" class="button button-blue">保存</button>
	</div>
	<script src="js/mui.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
	<script src="js/template-web.js"></script>
	<!-- build:js js/app.js -->
	<script src="js/api.js"></script>
	<script src="js/tools.js"></script>
	<!-- endbuild -->
	<script src="js/utils.js"></script>
	<script>
		var data = {
			h5UserId: getUserId(),
			heardImage: '',
			name: null,
			sex: null,
			telphone: null,
			birthday: null,
			workAge: null,
			jobStatus: null,
			education: null,
			specialty: null,
			nativePlace: null,
			hopeWorkAddress: null,
			politicsStatus: null,
			email: null,
			selfDesc: null
		};
		function init(res) {
			if (res['heardImage']) {
				$('.logo').attr('src', res['heardImage'])
				$('.weui-uploader__input-box').addClass('reset');
			}
			if (res['name']) {
				$('#name').val(res['name'])
			}
			if (res['telphone']) {
				$('#phone').val(res['telphone'])
			}
			if (res['sex']) {
				data.sex = res['sex'];
				$('#sex').val(config.sexArray[res['sex']])
			}
			if (res['birthday']) {
				data.birthday = res['birthday'];
				$('#date').val(res['birthday'])
			}
			if (res['workAge']) {
				data.workAge = res['workAge'];
				$('#word').val(config.resume_experience[res['workAge']])
			}
			if (res['jobStatus']) {
				data['jobStatus'] = res['jobStatus'];
				$('#status').val(config.joinstauts[res['jobStatus']])
			}
			if (res['education']) {
				data.education = res['education'];
				$('#edu').val(config.resume_edu[res['education']])
			}
			if (res['specialty']) {
				$('#major').val(res['specialty'])
			}
			if (res['nativePlace']) {
				$('#native-place').val(res['nativePlace'])
			}
			if (res['hopeWorkAddress']) {
				$('#address').val(res['hopeWorkAddress'])
			}
			if (res['politicsStatus']) {
				data.politicsStatus = res['politicsStatus'];
				$('#outlook').val(config.politics[res['politicsStatus']])
			}
			if (res['email']) {
				$('#email').val(res['email'])
			}
			if (res['selfDesc']) {
				$('#self-evaluation').val(res['selfDesc'])
			}
			if (res['histories']) {
				var obj = {};
				obj.list = res['histories'];
				$('#history').prepend(template('history-modules', obj))
			}
			if (res['experiences']) {
				var obj = {};
				obj.list = res['experiences'];
				$('#experiences').prepend(template('experiences-modules', obj))
			}
			if (res['educations']) {
				var obj = {};
				obj.list = res['educations'];
				$('#educations').prepend(template('educations-modules', obj))
			}
		}
		// 上传头像
		$('#uploaderInput').on('change', function (e) {
			var files = e.target.files;
			if (files.length == 0) {
				mui.toast('请选择头像!')
				return false
			}
			var formData = new FormData();
			formData.append('file', files[0])
			$.ajax({
				url: config.HOME_API + 'app/aliossUpload',
				type: "post",
				dataType: "json",
				data: formData,
				processData: false,
				contentType: false,
				success: function (e) {
					if (e.code == 2) {
						$('.logo').attr('src', e.url)
						$('.weui-uploader__input-box').addClass('reset');
					} else {
						mui.toast('上次失败!')
					}
				}
			})
		})
		// 性别
		$('#sex').picker({
			title: '性别',
			cols: [
				{
					textAlign: 'center',
					values: config.sexArray
				}
			],
			onChange: function (e) {
				data.sex = e.cols[0]['activeIndex']
			}
		})
		// 出生日期
		$("#date").calendar({
			onChange: function (p, values, displayValues) {
				data.birthday = values[0].replace(/\//g, '-')
			}
		});
		// 工作经验
		$("#word").picker({
			title: '工作经验',
			cols: [
				{
					textAlign: 'center',
					values: config.resume_experience
				}
			],
			onChange: function (e) {
				data.workAge = e.cols[0]['activeIndex']
			}
		})
		// 求职状态
		$('#status').picker({
			title: '求职状态',
			cols: [
				{
					textAlign: 'center',
					values: config.joinstauts
				}
			],
			onChange: function (e) {
				data.jobStatus = e.cols[0]['activeIndex']
			}
		})
		// 最高学历
		$('#edu').picker({
			title: '最高学历',
			cols: [
				{
					textAlign: 'center',
					values: config.resume_edu
				}
			],
			onChange: function (e) {
				data.education = e.cols[0]['activeIndex']
			}
		})
		// 政治面貌
		$('#outlook').picker({
			title: '政治面貌',
			cols: [
				{
					textAlign: 'center',
					values: config.politics
				}
			],
			onChange: function (e) {
				data.politicsStatus = e.cols[0]['activeIndex']
			}
		})
		// 回显数据
		if (isLogin()) {
			mui.ajax(config.ME_API + 'h5/h5GetResume', {
				data: {
					h5UserId: getUserId()
				},
				dataType: 'json',
				type: 'post',
				timeout: 10000,
				success: function (res) {
					if (res.code == 2) {
						res = res.data.appTdResume;
						this.init(res)
						localStorage.setItem('rid', res.rid);
					} else {
						mui.toast(res.msg);
					}
				}
			})
		}
		// 保存
		$('#save').on('tap', function () {
			data.name = $('#name').val();
			data.heardImage = $('.logo').attr('src');
			data.telphone = $('#phone').val();
			data.specialty = $('#major').val();
			data.nativePlace = $('#native-place').val();
			data.hopeWorkAddress = $('#address').val();
			data.email = $('#email').val();
			data.selfDesc = $('#self-evaluation').val();
			data.h5UserId = getUserId();
			data.rid = getRid();

			console.log(data)

			if (data['name'] == '') {
				mui.toast('请输入名字!');
				return false
			}
			if (data['telphone'] == '') {
				mui.toast('请输入手机号码!');
				return false
			}
			if (data['telphone'].length > 11 || data['telphone'].length < 11) {
				mui.toast('请输入正确的手机号码!');
				return false
			}
			if (data['sex'] == null) {
				mui.toast('请选择性别!');
				return false
			}
			if (data['birthday'] == null) {
				mui.toast('请选择出生日期!');
				return false
			}
			if (data['workAge'] == null) {
				mui.toast('请选择工作经验!');
				return false
			}
			if (data['jobStatus'] == null) {
				mui.toast('请求职状态选择!');
				return false
			}
			if (data['education'] == null) {
				mui.toast('请选择学历!');
				return false
			}
			if (data['specialty'] == '') {
				mui.toast('请填写专业!');
				return false
			}
			if (data['nativePlace'] == '') {
				mui.toast('请填写籍贯!');
				return false
			}
			if (data['hopeWorkAddress'] == '') {
				mui.toast('请填写现住地址!');
				return false
			}
			if (data['politicsStatus'] == null) {
				mui.toast('请选择政治面貌!');
				return false
			}
			if (data['emial'] == '') {
				mui.toast('请填写个人邮箱!');
				return false
			}
			if(data['email']) {
				if(!new RegExp(/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g).test(data['email'])) {
					mui.toast('请输入正确的邮箱!');
					return false
				}
			}
			if (data['selfDesc'] == '') {
				mui.toast('请填写自我评价!');
				return false
			}
			if (!isLogin()) {
				mui.toast('请先登录!');
				return false
			}
			$.ajax({
				url: config.ME_API + 'h5/h5EditResume',
				type: 'post',
				data: data,
				success: function (res) {
					if (res.code == 2) {
						mui.toast('修改成功!');
						setTimeout(function () {
							window.history.back()
						}, 1000)
					} else {
						mui.toast(res.msg)
					}
				}
			})
		})
	</script>
	<!--  工作经验模板 -->
	<script id="history-modules" type="text/html">
		<%for(var i = 0; i < list.length; i ++) {%>
			<div class="experience">
				<div class="flex-row-center">
					<div class="title"><%=list[i].workCompanyName%></div>
					<a href="./my-edit-work.html?hid=<%=list[i].hid%>" class="edit">
						<i class="icon-compose"></i> 修改
					</a>
				</div>
				<div class="flex-row-center desc">
					<p>职位: 
						<span><%=list[i].workPosition%></span>
					</p>
					<span><%=$imports.dateSplit(list[i].entryTime, 1)%>-<%=$imports.dateSplit(list[i].leaveTime, 1)%></span>
				</div>
			</div>
		<%}%>
	</script>
	<!-- 项目经验模板 -->
	<script id="experiences-modules" type="text/html">
		<%for(var i = 0; i< list.length; i ++) {%>
			<div class="experience experience-only">
				<div class="flex-row-center">
					<div class="title"><%=list[i].position%></div>
					<a href="./my-edit-project.html?eid=<%=list[i].expId%>" class="edit">
						<i class="icon-compose"></i> 修改
					</a>
				</div>
			</div>
		<%}%>
	</script>
	<!-- 教育经历模板 -->
	<script id="educations-modules" type="text/html">
		<%for(var i = 0; i< list.length; i ++) {%>
			<div class="experience">
				<div class="flex-row-center">
					<div class="title"><%=list[i].school%></div>
					<a href="./my-edit-edu.html?eid=<%=list[i].eid%>" class="edit">
						<i class="icon-compose"></i> 修改
					</a>
				</div>
				<div class="flex-row-center desc">
					<p><%=$imports.config.resume_edu[list[i].degree]%>
						<span><%=list[i].specialty%></span>
					</p>
					<span><%=$imports.dateSplit(list[i].entranceTime, 0)%>-<%=$imports.dateSplit(list[i].graduationTime, 0)%></span>
				</div>
			</div>
		<%}%>
	</script>
</body>

</html>